<script lang="ts" setup>
import CustomTabBar from '@/components/custom-tabbar.vue'

</script>

<template>
  <view class="message">
    <!-- 搜索 -->
    <view class="message-input">
      <!-- input -->
      <input type="text" placeholder="搜索用户名字" class="message-input-text" />
      <!-- 图标 -->
      <view class="message-input-icon">
        <uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-sousuo" size="25"></uni-icons>
      </view>
    </view>

    <!-- 好友列表 -->
    <scroll-view scroll-x="true" class="message-scroll" show-scrollbar="false">
      <view class="message-queue">
        <view class="message-queue-add">
          <view style="padding: 20rpx;">
            <image class="message-queue-add-image" src="/static/add.png" mode="scaleToFill" />
          </view>
          <h4 class="message-queue-add-h4">添加</h4>
        </view>

        <view class="message-queue-add" v-for="item in 8" :key="item">
          <view style="padding: 20rpx;">
            <image class="message-queue-add-image" src="/static/user/user.jpg" mode="scaleToFill" />
          </view>
          <h4 class="message-queue-add-h4">杨可可</h4>
        </view>
      </view>
    </scroll-view>

    <!-- 聊天列表 -->
    <view class="message-chatting" v-for="item in 8" :key="item">
      <!-- 头像 -->
      <view>
        <image class="message-chatting-image" src="/static/user/user.jpg" mode="scaleToFill" />
      </view>
      <view style="width: 100%; display: flex;justify-content: space-between;align-items: center;">
        <!-- 姓名 聊天内容 -->
        <view class="message-chatting-text">
          <h3 class="message-chatting-text-h3">杨可可</h3>
          <text class="message-chatting-text-content">周六时间不方便，我们约周日我们约周日我们约周日我们约周日</text>
        </view>
        <!-- 最新发送时间 未查看内容 -->
        <view class="message-chatting-time">
          <h4 class="message-chatting-time-h4">下午 14:46</h4>
          <text class="message-chatting-time-text">2</text>
        </view>
      </view>
    </view>
    <CustomTabBar />
  </view>
</template>

<style scoped lang="scss">
.message {
  &-input {
    background-color: $uni-bg-color;
    box-shadow: $uni-box-shadow;
    padding: 15rpx 30rpx;
    border-radius: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-icon {
      padding: 15rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #56b9ff;
      border-radius: 100%;
    }
  }

  /* 水平滚动容器样式 */
  &-scroll {
    display: inline-block;
    width: 100%;
    height: 240rpx; // 明确设置一个高度
    white-space: nowrap;
    overflow-x: auto; // 确保水平滚动
  }

  &-queue {
    display: flex;
    margin-top: 30rpx;
    white-space: nowrap;

    &-add {
      display: flex;
      align-items: center;
      flex-direction: column;
      min-width: 140rpx; // 确保有足够宽度

      &-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100%;
        background-color: $uni-bg-color;
      }

      &-h4 {
        font-size: 28rpx;
        color: #16295a;
        white-space: normal; // 允许文本换行
        text-align: center;
        width: 100%;
      }
    }
  }

  &-chatting {
    display: flex;
    background-color: $uni-bg-color;
    box-shadow: 0 0 1rpx 1rpx #ebf9f9;
    padding: 28rpx 20rpx;
    margin: 30rpx 0 22rpx 0;
    border-radius: 45rpx;

    &-image {
      width: 90rpx;
      height: 90rpx;
      border-radius: 100%;
    }

    &-text {
      width: 70%;
      margin-left: 20rpx;

      &-h3 {
        font-size: 32rpx;
        font-weight: 700;
        color: #152859;
      }

      &-content {
        font-size: 26rpx;
        color: #9ba2ac;
        display: -webkit-box; // 关键：启用多行省略
        -webkit-line-clamp: 1; // 限制为1行
        line-clamp: 1; // 标准属性，限制为1行
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; // 超出显示...
        white-space: normal; // 允许换行（配合-webkit-line-clamp）
        width: 90%; // 确保宽度限制生效
      }
    }

    &-time {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      &-h4 {
        font-size: 28rpx;
        color: #9ba2ac;
      }

      &-text {
        display: flex; // 确保内容居中
        justify-content: center;
        align-items: center;
        margin-top: 10rpx;
        width: 36rpx; // 固定宽度
        height: 36rpx; // 固定高度（与宽度相同确保圆形）
        background-color: #4fb7ff;
        border-radius: 100%;
        color: #ffffff;
        font-size: 25rpx;
        text-align: center; // 文本水平居中
        line-height: 36rpx; // 文本垂直居中（与高度相同）
      }
    }
  }

}
</style>
